<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            margin: 0 auto;
        }

        .navBar {
            width: 100%;
            height: 50px;
            font-size: 14px;
            line-height: 50px;
            display: flex;
            background-color: blue;
            color: #fff;
            padding: 0 10px;
        }

        .navList {
            display: flex;
            margin-left: 10px;
        }

        .navList div {
            width: 60px;
            text-align: center;
        }

        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    let bus = {
        list: [],
        emit(eventName, msg) {
            let index = this.list.findIndex((item) => {
                return item.eventName === eventName
            })
            if (index !== -1) {
                this.list[index].callback(msg)
            }
        },
        on(eventName, callback) {
            let obj = {
                eventName,
                callback
            }
            this.list.push(obj)
        }
    }
    class App extends React.Component {
        state = {

        }
        render() {
            return (
                <div className='box'>
                    <NavBar />
                    <HeroList />
                </div>
            )
        }
    }

    class NavBar extends React.Component {
        state = {
            navList: [
                {
                    name: "全部",
                    type: "all",
                }, {
                    name: "法师",
                    type: "mage"
                }, {
                    name: "战士",
                    type: "fighter"
                }, {
                    name: "坦克",
                    type: "tank"
                }, {
                    name: "刺客",
                    type: "assassin"
                }, {
                    name: "射手",
                    type: "marksman"
                }, {
                    name: "辅助",
                    type: "support"
                }
            ],
            activeIndex: 0
        }
        render() {
            let { navList, activeIndex } = this.state;
            return (
                <div className='navBar'>
                    <div>
                        <input type="text" onChange={(e) => {
                            console.log(e.target.value)
                            bus.emit("sendKeyword", e.target.value)
                        }} />
                    </div>
                    <div className='navList'>
                        {
                            navList.map((item, index) => {
                                return <div key={index} className={activeIndex === index ? "active" : ""} onClick={() => {
                                    this.setState({
                                        activeIndex: index
                                    })
                                    bus.emit("getType", item.type)
                                }}>{item.name}</div>
                            })
                        }
                    </div>
                </div>
            )
        }
    }
    class HeroList extends React.Component {
        state = {
            list: [],
            type: "",
            keyword: ""
        }
        render() {
            let { list, type, keyword } = this.state;
            return (
                <div style={{ display: "flex", flexWrap: "wrap", marginTop: "10px" }}>
                    {
                        list.map((item, index) => {
                            return (item.roles.join("").includes(type) && item.title.includes(keyword)) && <HeroItem key={index} item={item} />
                        })
                    }
                </div>
            )
        }
        componentDidMount() {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js")
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    let res = JSON.parse(xhr.response);
                    console.log(res)
                    this.setState({
                        list: res.hero
                    })
                }
            }
            bus.on("getType", (type) => {
                console.log(type)
                if (type === 'all') {
                    type = ""
                }
                this.setState({
                    type: type
                })
            })
            bus.on('sendKeyword', (keyword) => {
                this.setState({
                    keyword
                })
            })
        }
    }

    class HeroItem extends React.Component {
        state = {

        }
        render() {
            return (
                <div style={{ textAlign: "center", marginRight: "20px" }}>
                    <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${this.props.item.alias}.png`} alt="" />
                    <div>{this.props.item.title}</div>
                </div>
            )
        }
    }
    ReactDOM.render(<App />, document.getElementById("root"))


</script>

</html>